<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单练习</title>
		<style>
			body{
			width: 330px;
		}
		
		</style>
			
		
		<link rel="stylesheet" href="bootstrap.min.css" />
	</head>
	<body >
		<div class="container"> <h3>学生信息管理系统</h3></div>
		<!--lable标签for属性光标定位点击对应相对的框-->
		<div class="form-group"><label for="name">姓名:</label>
		<input type="text" name="name" id="name"
		 class="form-control"
		 placeholder="请输入姓名..."/> <!--H5新特性placeholder value=""-->
		<div class="form-group" ><label for="age">年龄:</label>
		<input type="number" name="age" id="age" 
		class="form-control"
		placeholder="请输入年龄..."/>
		</div>
		
		<div class="form-group"><label>性别:</label>
		<!--radio互斥，同名只能选择一个             默认选择-->
		<div class="radio-inline">
		<input type="radio" name="sex" id="sex"  checked="checked"/>男
		</div>
		<div class="radio-inline">
		<input type="radio" name="sex" id="sex" />女 </div>
		</div >
		<div  class="form-group" ><label>爱好:</label>
		<div class="radio-inline">
		<input  type="checkbox" name="hobby" id="hobby" />篮球 	</div >
		<div class="radio-inline">
		<input type="checkbox" name="hobby" id="hobby" />足球  </div >
		<div class="radio-inline">
		<input type="checkbox" name="hobby" id="hobby" />爬山 </div >
		</div>
		<div class="form-group"><label>学历:</label>
		<!--下拉标签-->
			
		<select name="edu" id="edu" class="form-control" >
			<!--单选，选择幼儿园，表单提交value值-->
		<option value="1">幼儿园</option>
			<option value="2">小学</option>
		<option value="3">初中</option>
			<option value="4">高中</option>
			<option value="5">专科</option>
			<option value="6">本科</option>
			<option value="7">研究生</option>
			<option value="8">博士</option>
		</select>
		</div>
		<div class="form-group">
		
		<!--<input type="button" name="submit" value="保存">旧写法-->
		<!--class属性支持多个样式 样式之间空格隔开-->
		<button class="btn btn-primary" type="button" name="submit">保存
		</button>	
		<button class="btn btn-danger" type="button" name="clear">取消
				</button>	
		</div>
	</body>
</html>
